<template>
	<el-container>
		<el-header class="m-header">
			<img class="logo" src="../assets/index/20211311802.jpg" />
			<el-menu :default-active="activePath" class="el-menu-demo" mode="horizontal" @select="handleSelect"
				background-color="#ffffff" text-color="#000000" active-text-color="#ff5500">

				<el-menu-item index="index">首页</el-menu-item>
				<el-menu-item index="hotequipments">全部商品</el-menu-item>
				<!-- <el-menu-item index="proequipments">促销商品</el-menu-item> -->
				<!-- <el-menu-item index="comset">组合套餐</el-menu-item> -->
				<el-menu-item index="usernotice">公告新闻</el-menu-item>
				<el-menu-item index="pequip">个人设备</el-menu-item>
				<el-menu-item index="usercenter">用户中心</el-menu-item>
				<el-input placeholder="请输入内容" v-model="searchInput" style="width: 300px;margin-right: 20px;" clearable>
					<i slot="suffix" @click="search" class="el-input__icon el-icon-search"></i>
				</el-input>

				<el-dropdown>
					<span class="el-dropdown-link">
						<i class="el-icon-user" style="font-size: 24px;margin-right: 20px;"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-show="isVisitor" @click.native="toLogin">立即登录</el-dropdown-item>
						<el-dropdown-item v-show="isVisitor" @click.native="toRegist">立即注册</el-dropdown-item>
						<el-dropdown-item v-show="isUser">尊敬的{{}}</el-dropdown-item>
						<el-dropdown-item v-show="isUser">立即注册</el-dropdown-item>
						<el-dropdown-item @click.native="toUserCenter">个人资料</el-dropdown-item>
						<el-dropdown-item @click.native="toHistoricalOrders">历史订单</el-dropdown-item>
						<el-dropdown-item>退出登录</el-dropdown-item>

					</el-dropdown-menu>
				</el-dropdown>

				<i class="el-icon-shopping-cart-2" style="font-size: 24px;margin-right: 20px;" @click="toCart"></i>
			</el-menu>
		</el-header>

		<el-main>
			<router-view></router-view>
		</el-main>
		<el-footer>
			<template>
				<span style="font-size:14px;">光伏商城 <a href="http://www.jianjiuhuang.top">www.jianjiuhuang.top</a></href>
					&nbsp; &nbsp;备案号：<a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2023001410号-1</a></span>
			</template>
		</el-footer>
	</el-container>
</template>

<script scoped>
	import request from '../utils/axios/request';
	export default {
		data() {
			return {
				isVisitor: true,
				isUser: false,
				activeIndex: 'index',
				searchInput: '',
			};
		},
		computed:{
			activePath(){
				return this.$route.path
			}
		},
		methods: {
			search() {
				this.$cookies.set("serarchInput", this.searchInput)
				// console.log(document.cookie )
				this.$router.push("/serarchequipments")
				if (this.$route.path == '/serarchequipments') {
					window.location.reload();
				}

			},
			toLogin: function() {
				this.$router.push('/userloginandregist')

			},
			toRegist() {
				this.$router.push('/userRegist')
			},
			toCart() {
				this.$router.push('/cart')
			},
			toUserCenter() {
				this.$router.push('/usercenter')
			},
			toHistoricalOrders() {
				this.$router.push('/userHistoricalOrders')
			},

			handleSelect(key, keyPath) {
				this.$router.push({
					path: key,
					params: {
						data: ''
					}
				})
				console.log(key, keyPath);
			}
		},
		created() {

		}
	}
</script>

<style>
	.el-icon-shopping-cart-2:hover {
		cursor: pointer;
	}

	.logo {
		width: 160px;
		height: 80px;
	}

	.el-input {
		margin-left: 30px;

	}

	.el-input__inner {
		border: 1px solid #3b3b3b !important;
		color: #000000 !important;
	}

	.el-header {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 60px;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: left;
		margin-left: 130px;
		/* 水平居中 */
	}

	.el-footer {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-menu {
		margin-left: 50px !important;
	}

	.el-menu-item {
		font-size: 20px !important;
	}

	.el-menu-item:hover {
		cursor: pointer;
	}

	.m-header {
		height: 80px !important;
	}

	.el-main {
		background-color: #f4f4f4;
		color: #333;
		text-align: center;
		line-height: 160px;

	}

	.el-container {
		min-height: 100vh;
	}

	/* 跑马灯-首页 */

	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	/* 跑马灯-首页 */
</style>